import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite,base,config.js";
import viteDevConfig from "./vite,dev,config.js";
import viteCDNPlugin from "vite-plugin-cdn-import";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ddq from "./chajian.js";
//策略模式
const envResolver = {
  build: () => {
    return {
      ...viteBaseConfig,
      ...viteDevConfig,
    };
  },

  serve: () => {
    return {
      ...viteBaseConfig,
    };
  },
};

export default defineConfig(({ mode, command }) => {
  /**
   * 环境变量
   * process.cwd()为项目根目录
   * mode为开发环境或生产环境
   * loadEnv 加载环境变量
   */
  const env = loadEnv(mode, process.cwd(), "");
  return {
    define: {
      // 字符串值需要显式引用
      __APP_VERSION__: JSON.stringify("1.0.0"),
      // 或者使用嵌套引号
      __API_URL__: '"https://api.example.com"',
      // 布尔值和数字可以直接写
      __DEV__: true,
      __BUILD_DATE__: Date.now(),
      // 对象需要序列化
      __FEATURE_FLAGS__: JSON.stringify({
        enableNewFeature: true,
        experimentalMode: false,
      }),
    },
    server: {
      //端口
      port: env.VITE_PORT,
      // 是否自动打开浏览器
      open: false,
      /**
       *  代理
       */
      proxy: {
        "/api": {
          target: "https://api.example.com",
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ""),
        },
      },
    },
    envPrefix: "VITE_", // 配置环境变量前缀
    /**
     * 输出配置
     */
    build: {
      //配置rollup的一些构建策略
      rollupOptions: {
        external: ["lodash"], // 重要：告诉 Rollup 不要打包 lodash
        //控制输出
        output: {
          // 控制静态文件输出文件名
          assetFileNames: "[hash].[name].[ext]",
        },
      },
      /**
       * 静态资源在构建时小于此阈值的将被内联为 base64 URL
       * 设置为 0 则完全禁用内联
       * 默认: 4096 (4kb)
       */
      assetsInlineLimit: 4096,
      /**
       * 构建时输出的目录
       */
      outDir: "dist",
      /**
       * 静态资源目录
       */
      assetsDir: "static",
      /**
       * 删除构建时输出的目录
       */
      emptyOutDir: true,
    },
    /**
     * 插件
     */
    plugins: [
      viteCDNPlugin({
        modules: [
          {
            name: "lodash",
            var: "_",
            path: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js",
          },
        ],
      }),
      {
        config: options => {
          console.log("config", options);
        },
        configureServer: server => {},
        transformIndexHtml: (html, ctx) => {},
        configResolved: options => {
          // 配置文件解析流程完全完毕以后会走的狗子
          console.log("结束了", options);
        },
        configurePreviewServer: server => {},
      },
      ddq(),
      vue(),
      AutoImport({
        //自动导入element-plus
        resolvers: [ElementPlusResolver()],
        //自动导入vue、vue-router、pinia
        imports: [
          "vue",
          "vue-router",
          "pinia",
          // 可添加其他
        ],
        // 生成类型声明文件
        dts: true,
      }),
      Components({
        //自动导入element-plus
        resolvers: [ElementPlusResolver()],
      }),
    ],
    //控制模块解析规则
    resolve: {
      //路径映射规则
      alias: {
        /**
         * 将路径片段解析为绝对路径。
         * __dirname：获取当前文件目录，主要在 Node.js/SSR 环境使用
         */
        "@": resolve(__dirname, "./src"),
      },
    },
    extensions: ['.ts', '.js', '.vue', '.json'],  // 确保包含 .ts
    //css 配置
    css: {
      /**
       * 是否启用开发环境css源映射
       */
      devSourcemap: true,
      //css模块化的默认行为进行覆盖
      modules: {
        /**
         * localsConvention 修改css模块化的默认行为，（驼峰或者下划线形式）
         *  'camelCase' - 提供两种方式：styles.ceshiDdq 和 styles['ceshi-ddq']
         *  'camelCaseOnly' - 只转换驼峰：styles.ceshiDdq
         *  'dashes' - 提供两种方式：styles.ceshiDdq 和 styles['ceshi-ddq']
         *  'dashesOnly' - 只转换短横线：styles.ceshiDdq（访问 .ceshi-ddq）
         */
        localsConvention: "dashes",

        /**
         * CSS Modules 的作用域行为
         * 可选值:
         * - 'local': 局部作用域 (默认)
         * - 'global': 全局作用域
         */
        scopeBehaviour: "local",

        /**
         * 生成 CSS 类名的函数或格式字符串
         * 示例:
         * - '[name]__[local]___[hash:base64:5]': 生成类似 "App__header___1abc2"
         * - (name, filename, css) => string: 自定义函数
         * @param {string} name - 类名
         * @param {string} filename - 文件名
         * @param {string} css - CSS 内容
         */
        generateScopedName: "[name]__[local]___[hash:base64:5]",

        /**
         * 全局模块路径的正则表达式数组
         * 匹配到的文件将作为全局 CSS Modules 处理
         */
        globalModulePaths: [/\.global\.css$/, /\.global\.scss$/],
      },
      //less 配置
      preprocessorOptions: {
        less: {
          /**
           * Less 数学计算模式配置
           * 控制 Less 中数学运算的行为方式
           *
           * 可选值:
           * - 'always': 总是进行数学计算 (默认)
           * - 'parens-division': 只有在括号内才进行除法运算
           * - 'parens': 只有在括号内才进行数学运算
           * - 'strict': 严格模式，只在括号内进行运算且需要明确单位
           * - 'strict-legacy': 传统严格模式 (Less 3.x 兼容)
           */
          math: "always",

          /**
           * 传递给 Less 的选项
           * 查看 Less 文档获取完整选项: http://lesscss.org/usage/#less-options
           */
          modifyVars: {
            // 修改 Less 变量
            "primary-color": "#1DA57A",
          },

          additionalData: `
          @import "@/assets/css/index.less";`,
        },
      },
      postcss: {
        plugins: [
          /**
           * 配置 PostCSS 插件
           *
           * @param {object} postcss - PostCSS 配置对象
           * @param {object} postcss.plugins - PostCSS 插件对象
           * @param {object} postcss.options - PostCSS 选项对象
           */
          {
            postcssPlugin: "internal:chokidar:css",
            AtRule: {
              // 监听 @import 的文件
              import: atRule => {},
            },
          },
        ],
      },
    },
  };
});
